<template>
	<view class='container editor'>
	  <view class='editor_li'>
		<text>药品名称</text>
		<text>盐酸吡格列酮</text>
	  </view>
	  <view class='editor_li'>
		<text>规格</text>
		<input placeholder-class='input' placeholder='30mg*7片/盒'></input>
	  </view>
	  <view class='editor_li'>
		<text>用法用量</text>
		<input placeholder-class='input' placeholder='口服，一日3次，一次3粒' value='口服，一日3次，一次3粒'></input>
	  </view>
	  <view class='editor_li'>
		<text>数量</text>
		<view  class='price'>
		  <button @tap="cannum">-</button>
		  <input  placeholder-class='input' type="text" :value="spnum" />
		  <button @tap="addnum">+</button>

		</view>  
	  </view>
	  <view class='editor_li'>
		<text>单位选择</text>
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="picker" :hidden='Ttime'>
				请选择单位
				<text class='iconfont icon-xia'></text>
			</view>
		</picker>
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="picker" :hidden='!Ttime'>
				{{array[index]}}
				<text class='iconfont icon-xia'></text>
			</view>
		</picker>
	  </view>
	  <button class='generate_button' @tap='start_sure'>确定</button>
	</view>
 
</template>

<script>
	export default{	
		data(){
			return{
				spnum:1,
				array: ['件', '盒'],
				index: 0,
				Ttime:false
			}
		},
		methods:{
			addnum() {
				var spnum = this.spnum;
				spnum++;
				this.spnum=spnum
			},
			cannum() {
				var spnum = this.spnum;
				spnum--;
				if (spnum <= 0) {
				  spnum = 1;
				}
				this.spnum=spnum
			},
			//单位选择
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.Ttime = true
			},
			start_sure(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	 
		 
	}
</script>

<style>
	.generate_button{
  margin: 40upx 60upx;
  background: #108ec9;
  line-height: 85upx;
  height: 85upx;
  color: #fff;
  font-size: 30upx;
}
.editor_li{
  display: flex;
  align-items: center;

  padding: 20upx 30upx;
  box-sizing: border-box;
 
}
.editor_li:first-child{
  border-bottom: 20upx solid #f0f0f0;
  padding: 0 30upx;
}
.editor_li text:last-child{
  color: #666;
  font-size: 28upx;
  line-height: 90upx;
  height: 90upx;
}
.editor_li text:first-child{
 width: 20%;
 display: inline-block;
}

.editor_li input{
  border: 1px solid #e9e9e9;
  width: 80%;
  height: 70upx;
  line-height: 70upx;
  padding: 0 20upx;
  border-radius: 10upx;
  font-size: 28upx;
  color: #666;
}
 
.editor_li:nth-child(4) input{
  /* width: 10%; */
  text-align: center;
  margin-right: 10upx;
}
.editor_li  .input{
  color: #666;
}
.picker text{
  font-size: 24upx;
  color: #666;
}
 
.editor_li .picker text{
  line-height: 70upx;
   height: 70upx;
   float: right;
   color: #c4c4c4;
   font-size: 38upx;
}
.editor_li .picker{
  border:1px solid #e9e9e9;
  width: 245upx;
 text-align:center;
   color: #666666;
   line-height: 70upx;
   height: 70upx;
}
.editor_li .price{
  display: flex;
  border:1px solid #e9e9e9;
  align-items: center;
   color: #666666

}
.editor_li .price input{
  width: 80upx;
  border-radius: 0;
  margin-right: 0;
  border:  0;
 padding: 0;
   border-right:1px solid #e9e9e9;
  border-left:1px solid #e9e9e9;
}
.editor_li button{
  background: none;
  padding: 0;

   width: 80upx;
   line-height: 70upx;
   height: 70upx;
   border-radius: 0;
   color: #666666
}
</style>
